<template>
	<view class="y-flex y-flex-1">
		<yingbing-slider
		:data="list"
		class="y-flex-1"
		ref="slider"
		vertical
		:pulldownHeight="60"
		:pullupHeight="60"
		:pulldownable="pageStyle.enablePulldown == 1"
		:pullupable="pageStyle.enableLoadmore == 1"
		@change="handleChange"
		@pulldown="handlePulldown"
		@pullup="handlePullup">
			<template #pulldownDefault>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="下拉刷新"></com-text>
				</view>
			</template>
			<template #pulldownReady>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="松开刷新"></com-text>
				</view>
			</template>
			<template #pulldownLoading>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="正在刷新"></com-text>
				</view>
			</template>
			<template #pulldownSuccess>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="刷新成功"></com-text>
				</view>
			</template>
			<template #pulldownFail>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="刷新失败"></com-text>
				</view>
			</template>
			<template #pullupDefault>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="上拉加载"></com-text>
				</view>
			</template>
			<template #pullupReady>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="松开加载"></com-text>
				</view>
			</template>
			<template #pullupLoading>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="正在加载"></com-text>
				</view>
			</template>
			<template #pullupSuccess>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="加载成功"></com-text>
				</view>
			</template>
			<template #pullupFail>
				<view class="loading-box y-flex y-flex-1 y-align-center y-justify-center">
					<com-text :size="loadingSize" :color="loadingColor" value="加载失败"></com-text>
				</view>
			</template>
			<template v-slot="{item,index}">
				<video
				:is-live="item.isLive"
				:loop="sliderEnd == 0"
				:enable-danmu="item.barrages && item.barrages.length > 0"
				:enable-progress-gesture="!item.isLive"
				:controls="false"
				class="y-flex-1"
				:ref="'video' + index"
				:danmu-list="item.barrages"
				:src="item.src"
				:title="item.title"
				:poster="item.cover"
				@ended="handleEnded(index)"
				@play="handlePlay(index)"
				@pause="handlePause(index)"
				@timeupdate="handleTimeupdate($event, index)"
				@fullscreenchange="handleFullscreenChange($event, index)"
				@error="handleError($event, index)">
					<view class="position-absolute-cover y-flex y-align-center y-justify-center" v-if="item.error">
						<text class="fs-28 fr-fff" @tap="handleCopy(item.src)">加载失败：{{item.src}}</text>
					</view>
					<view class="position-absolute-cover" v-else @tap="handleToggle(index)"></view>
					<view class="y-flex position-absolute bottom-0 left-0 right-0 page-padding-gap pt-30 pb-30">
						<view class="y-flex y-row y-align-center">
							<com-icon :name="item.paused ? 'play_fill' : 'stop'" class="mr-20" size="45" color="#fff" @click="handleToggle(index)"></com-icon>
							<text class="fr-fff fs-35 y-flex-1" v-if="item.isLive">直播中 · {{_timeFormat(item.currentTime)}}</text>
							<text class="fr-fff fs-35 y-flex-1" v-else>{{_timeFormat(item.currentTime)}} / {{_timeFormat(item.duration)}}</text>
							<com-icon class="mr-30" name="down" color="#fff" size="45" @click="handleDownload(index)" v-if="!item.isLive"></com-icon>
							<template v-if="item.fullscreen">
								<com-icon name="return" color="#fff" size="45" @click="handleChangeFull(index, 0)"></com-icon>
							</template>
							<template v-else>
								<com-icon class="mr-30" name="full" color="#fff" size="45" @click="handleChangeFull(index, -90)"></com-icon>
								<com-icon name="mobile" color="#fff" size="45" @click="handleChangeFull(index, 0)"></com-icon>
							</template>
						</view>
						<com-safe-bottom></com-safe-bottom>
					</view>
				</video>
			</template>
		</yingbing-slider>
	</view>
</template>

<script>
	import { hexToRgba, timeFormat, copyText } from '@/assets/js/util.js'
	export default {
		inject: ['getPageStyle', 'getPage', 'getQuery', 'getSkinColor', 'download'],
		computed: {
			sliderEnd () {
				return this.$store.getters['setting/GET_VIDEO_SLIDER_ENDED']
			},
			page () {
				return this.getPage()
			},
			skinColor () {
				return this.getSkinColor()
			},
			pageStyle () {
				return this.getPageStyle()
			},
			query () {
				return this.getQuery()
			},
			network () {
				return this.$store.getters['network/GET']
			},
			loadingSize () {
				return 32
			},
			loadingColor () {
				return hexToRgba(this.skinColor.color_white, .8)
			}
		},
		data () {
			return {
				list: [],//视频列表
				current: 0,//当前项
				currentPage: 1,
				loading: false
			}
		},
		mounted() {
			this.$nextTick(function () {
				this.handlePulldown()
			})
		},
		methods: {
			async handlePulldown (callback) {
				try{
					this.page = 1
					this.list = await this.handleGetCell()
					this.$emit('loaded', true)
					callback && callback('success')
					this.$nextTick(function () {
						if ( this.list.length > 0 )	this.handleChange({current: 0})
					})
				}catch(e){
					this.$emit('loaded', true)
					callback && callback('fail')
				}
			},
			async handlePullup(callback) {
				try{
					this.loading = true
					this.page++
					const list = await this.handleGetCell()
					if ( list && list.length > 0 ) this.list = this.list.concat(list)
					callback && callback('success')
				}catch(e){
					callback && callback('fail')
				}
			},
			async handleChange (e) {
				this.current = e.current
				if ( this.list[e.current] && this.list[e.current].src ) this.handleToggle(e.current)
				const prev = e.current - 1
				if ( this.list[prev] && this.list[prev].src && !this.list[prev].paused ) this.handleToggle(prev)
				const next = e.current + 1
				if ( this.list[next] && this.list[next].src && !this.list[next].paused ) this.handleToggle(next)
				const five = e.current + 5
				if ( !this.list[five] && !this.loading && this.pageStyle.enableLoadmore ) {
					this.loading = true
					try{
						this.page++
						const list = await this.handleGetCell()
						if ( list && list.length > 0 && this.loading ) this.list = this.list.concat(list)
						this.loading = false
					}catch(e){
						this.loading = false
					}
				}
			},
			async handleGetCell () {
				const cell = this.page?.cell || {}
				const params = Object.assign({}, this.query, {page: this.currentPage})
				const staticData = cell.staticData ? this.network.staticDataHandle(cell.staticData, params) : []
				const dynamicData = cell.dynamicData
				const request = cell.request
				let data = []
				if ( dynamicData && request ) {
					const newRequest = this.network.requestHandle(request, params)
					const response = await this.network.$request(newRequest)
					data = await this.network.$list(dynamicData, response)
				}
				return staticData.concat(data).map(s => Object.assign({}, s, {currentTime: 0, duration: 0, paused: true, fullscreen: false, error: false, isLive: s.isLive == 1 ? true : s.isLive == 0 ? false : s.isLive}))
			},
			handleCopy (src) {
				copyText(src)
			},
			handlePlay (index) {
				this.$set(this.list[index], 'paused', false)
			},
			handlePause (index) {
				this.$set(this.list[index], 'paused', true)
			},
			handleError (e, index) {
				this.$set(this.list[index], 'error', true)
			},
			handleEnded (index) {
				if ( this.sliderEnd == 1 ) {
					if ( this.list[index+1] ) this.$refs.slider.slideToNext()
					else uni.showToast({title: '请求未完成，暂时没有更多视频展示，请等待视频加载完成后手动上拉', icon: 'none'})
				}
			},
			handleTimeupdate (e, index) {
				this.$set(this.list[index], 'currentTime', e.detail.currentTime)
				this.$set(this.list[index], 'duration', e.detail.duration)
			},
			handleFullscreenChange (e, index) {
				this.$set(this.list[index], 'fullscreen', e.detail.fullScreen)
			},
			handleToggle (index) {
				if ( this.$refs['video' + index] ) {
					if ( this.list[index].paused ) this.$refs['video' + index].play()
					else this.$refs['video' + index].pause()
				}
			},
			handleChangeFull (index, direction) {
				if ( this.$refs['video' + index] ) {
					if ( this.list[index].fullscreen ) this.$refs['video' + index].exitFullScreen()
					else this.$refs['video' + index].requestFullScreen({direction: direction || 0})
				}
			},
			handleDownload (index) {
				if ( !this.list[index].src ) {
					uni.showToast({
						title: '未找到视频链接',
						icon: 'none'
					})
					return
				}
				this.download({title: this.list[index].title, url: this.list[index].src, isAdult: this.list[index].isAdult || 0})
			},
			_timeFormat (time) {
				return timeFormat(time, 'mm:ss')
			}
		}
	}
</script>

<style>
	.loading-box {
		background-color: rgba(0,0,0,.3);
	}
</style>
